<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 引入fontface 图标库的资源 */
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.eot');
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
                url('font/iconfont.woff2') format('woff2'),
                url('font/iconfont.woff') format('woff'),
                url('font/iconfont.ttf') format('truetype'),
                url('font/iconfont.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 30px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: red
        }
        /* i{ */
            /* i 行内元素 margin-top/bottom  */
            /* margin-top: 100px
        } */
    </style>
</head>

<body>
    <!-- 习惯性的使用i标签表示引入图标 -->
        <i class="iconfont">&#xe602;</i>
</body>

</html>
<!-- 
    unicode的优缺点
        - 兼容性最好，支持 IE6+
        - 无法给图标设置多种颜色
 -->